<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jiesuan.css" rel="stylesheet">
    	<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
        <div class="container-fluid header">
                <div class="row">
                    <div class="col-xs-1 text-right right">
                            
                    </div>
                    <div class="col-xs-11 text-center center">
                        <p class="zhifu">订单支付</p>
                    </div>
                </div>
        </div>
        <div class="session">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="col-xs-4">
                            <p class="right">收货人</p>
                        </div>
                        <div class="col-xs-8">
                               <input type="text" placeholder="请使用真实姓名" id="name">
                        </div>
                    </div>
                    <div class="col-xs-12">
                            <div class="col-xs-4">
                                <p class="right">联系人电话</p>
                            </div>
                            <div class="col-xs-8">
                                   <input type="text" placeholder="收件人电话号码" id="phone">
                            </div>
                    </div>
                    <div class="col-xs-12">
                            <div class="col-xs-4">
                                <p class="right">所在地区</p>
                            </div>
                            <div class="col-xs-8">
                                   <input type="text" placeholder="请选择" id="area">
                                   <svg t="1566484520952" class="gt" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15409" width="13" height="13"><path d="M313.051429 1009.371429l462.262857-462.262858c8.777143-8.777143 14.628571-20.48 14.628571-32.182857s-5.851429-23.405714-14.628571-32.182857L313.051429 14.628571C304.274286 5.851429 292.571429 0 277.942857 0 254.537143 0 234.057143 20.48 234.057143 46.811429c0 11.70285699 2.925714 23.405714 11.702857 32.182857l465.188571 465.188571 0-64.365714L248.685714 942.08c-8.777143 8.777143-14.628571 20.48-14.628571 35.108571 0 23.405714 20.48 46.811429 46.811428 46.811429 11.70285699 0 23.405714-5.851429 32.182858-14.628571z" fill="#CECECE" p-id="15410"></path></svg>
                            </div>
                    </div>
                    <div class="col-xs-12">
                            <div class="col-xs-4">
                                <p class="right">详细地址</p>
                            </div>
                            <div class="col-xs-8">
                                   <input type="text" placeholder="输入或点击右侧选择地址" id="areainfo">
                            </div>
                    </div>
                </div>
        </div>
        <div class="moren">
                <div class="col-xs-12">
                        <div class="col-xs-4">
                            <p class="dizhi">设置为默认地址</p>
                        </div>
                        <div class="col-xs-8">
                            <ul>
                                    <li class="mui-table-view-cell">
                                            <span></span>
                                            <div class="mui-switch mui-switch-blue mui-switch-mini">
                                                <div class="mui-switch-handle"></div>
                                            </div>
                                    </li>
                            </ul>
                        </div>
                </div>
        </div>
        <div class="dianpu">
            <div class="col-xs-12">
                <div class="col-xs-2">
                    <svg t="1566626739199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16215" width="20" height="20"><path d="M878.167183 662.588235c-12.681115 0-22.19195 9.510836-22.191951 22.191951v209.23839c0 12.681115-9.510836 22.19195-22.19195 22.19195H209.23839c-12.681115 0-22.19195-9.510836-22.19195-22.19195v-209.23839c0-12.681115-9.510836-22.19195-22.191951-22.191951-12.681115 0-22.19195 9.510836-22.19195 22.191951v209.23839c0 34.873065 28.532508 63.405573 63.405572 63.405573H833.783282c34.873065 0 63.405573-28.532508 63.405572-63.405573v-209.23839c0-12.681115-6.340557-22.19195-19.021671-22.191951z m63.405572-317.027863c0-9.510836-3.170279-15.851393-6.340557-25.36223 0 0-98.278638-168.024768-98.278638-171.195046-9.510836-19.021672-19.021672-31.702786-60.235294-31.702786H272.643963c-34.873065 0-50.724458 15.851393-63.405573 34.873065l-95.108359 164.854489c-6.340557 9.510836-9.510836 19.021672-9.510836 31.702786v145.832817c0 69.74613 53.894737 126.811146 120.470588 126.811146 41.213622 0 76.086687-19.021672 98.278638-53.894737 22.19195 34.873065 60.235294 53.894737 98.278638 53.894737 41.213622 0 76.086687-19.021672 98.278638-53.894737 22.19195 34.873065 60.235294 53.894737 98.278637 53.894737 41.213622 0 76.086687-19.021672 98.278638-53.894737 22.19195 34.873065 60.235294 53.894737 98.278638 53.894737 66.575851 0 120.470588-57.065015 120.470588-126.811146l6.340557-149.003095c0 3.170279 0 3.170279 0 0z m-697.4613-168.024768c6.340557-9.510836 12.681115-15.851393 25.362229-15.851393H770.377709c12.681115 0 19.021672 0 25.362229 15.851393 15.851393 25.362229 57.065015 95.108359 63.405573 107.789473H180.705882c6.340557-12.681115 50.724458-82.427245 63.405573-107.789473z m653.077399 317.027863c0 44.383901-34.873065 82.427245-79.256965 82.427245S738.674923 538.947368 738.674923 494.563467v-22.19195c0-12.681115-9.510836-22.19195-22.191951-22.19195-12.681115 0-22.19195 9.510836-22.19195 22.19195v22.19195c0 44.383901-34.873065 82.427245-79.256966 82.427245s-79.256966-38.043344-79.256966-82.427245v-22.19195c0-12.681115-9.510836-22.19195-22.191951-22.19195-12.681115 0-22.19195 9.510836-22.19195 22.19195v22.19195c0 44.383901-34.873065 82.427245-79.256966 82.427245s-79.256966-38.043344-79.256966-82.427245v-22.19195c0-12.681115-9.510836-22.19195-22.19195-22.19195-12.681115 0-22.19195 9.510836-22.191951 22.19195v22.19195c0 44.383901-34.873065 82.427245-79.256966 82.427245S129.981424 538.947368 129.981424 494.563467V348.73065c0-9.510836 9.510836-19.021672 19.021672-19.021672h713.312693c9.510836 0 19.021672 9.510836 19.021672 19.021672v145.832817z" p-id="16216" fill="#7F7F7F"></path></svg>
                </div>
                <div class="col-xs-10">
                        <p class="mingcheng">aaa</p>
                </div>
                <div class="col-xs-12 shopinfo"style="padding-right: 0px;padding-left: 0px">
                    <div class="col-xs-3 shop">
                        <div class="tu">

                        </div>
                    </div>
                    <div class="col-xs-9 info" style="padding-right: 0px;padding-left: 0px">
                        <div class="col-xs-12" style="padding-right: 0px;padding-left: 0px">
                            <div class="col-xs-10 binfo">
                                <p class="cotent">迪美路daymellow 迪美路 芦荟胶正品祛痘痘印补水保</p>
                            </div> 
                            <div class="col-xs-2">
                                <p class="one">+1</p>
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <p>黄金芦荟凝胶</p>
                        </div>
                        <div class="col-xs-12">
                                <p>￥45</p>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
        <div class="zhifus">
            <div class="col-xs-12 ">
                <P class="fang">支付方式</P>
            </div>
            <div class="col-xs-12 one">
            <div class="col-xs-2">
                    <svg t="1566634492015" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17047" width="25" height="25"><path d="M1024 696.785529l-329.309016-110.54543a572.043506 572.043506 0 0 0 52.363624-112.174519 524.101699 524.101699 0 0 0 30.952721-115.199974l-213.178134-1.861818v-72.84362l258.327214-1.861818V230.865635H564.596468v-116.36361h-126.603608v116.36361H197.120188v51.432715l240.872672-1.62909v78.196346h-193.163592v40.727263h397.730819a382.603549 382.603549 0 0 1-19.549087 74.239983c-15.359997 41.192718-30.95272 77.265437-30.95272 77.265437s-186.181776-65.396349-285.090844-65.396348-218.065405 39.563627-229.701766 154.298146 55.854533 176.872687 150.574511 199.679955a376.552642 376.552642 0 0 0 258.559941-37.469083 601.134409 601.134409 0 0 0 151.039966-121.949063l383.999913 186.181776a189.439957 189.439957 0 0 1-186.181776 157.323601H189.672917A189.439957 189.439957 0 0 1 0.000233 834.327316V189.672917A189.439957 189.439957 0 0 1 189.672917 0.000233h644.654399A189.439957 189.439957 0 0 1 1024 189.672917v507.345339z m-479.6508-63.999986s-118.458155 144.058149-257.86176 144.05815-168.959962-68.421803-168.959961-117.759974 29.090902-102.632704 147.781784-110.545429 279.272664 84.014526 279.272664 84.014526z" fill="#02A9F0" p-id="17048"></path></svg>
            </div>
            <div class="col-xs-8">
                <p class="zz">支付宝</p>
            </div>
            <div class="col-xs-2">
                
            </div>
            </div>
            <div class="col-xs-12 two">
                    <div class="col-xs-2">   
                            <svg t="1566635716138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21689" width="25" height="25"><path d="M412.485818 608.581818c-50.129455 26.903273-57.576727-15.127273-57.576727-15.127273l-62.836364-141.172363c-24.203636-67.118545 20.945455-30.254545 20.945455-30.254546s38.679273 28.16 68.049454 45.381819c29.323636 17.175273 62.836364 5.026909 62.836364 5.026909l410.856727-182.597819C778.938182 199.028364 653.730909 139.636364 511.953455 139.636364 280.669091 139.636364 93.090909 297.658182 93.090909 492.637091c0 112.128 62.091636 211.921455 158.813091 276.619636L234.496 865.745455s-8.517818 28.206545 20.945455 15.127272c20.061091-8.936727 71.261091-40.866909 101.748363-60.322909 47.941818 16.104727 100.072727 25.041455 154.810182 25.041455 231.330909 0 418.909091-158.021818 418.909091-353.000728 0-56.459636-15.825455-109.800727-43.799273-157.137454-130.932364 75.869091-435.386182 252.043636-474.624 273.082182" fill="#2BB915" p-id="21690"></path></svg>
                    </div>
                    <div class="col-xs-8">
                        <p class="zz">微信支付</p>
                    </div>
                    <div class="col-xs-2">
        
                    </div>
                    </div>
        </div>
        <div class="prick">
            <div class="col-xs-12">
                <div class="col-xs-2">
                    <p>总计</p>
                </div>
                <div class="col-xs-8">
                        
                </div>
                <div class="col-xs-2">
                        <p style="color: #F72B48">￥45</p>
                    </div>
            </div>
            <div class="col-xs-12 ee" style="margin-top: -15px;">
                    <div class="col-xs-2">
                        <p style="width: 80px;">商品总额</p>
                    </div>
                    <div class="col-xs-8">
                            
                    </div>
                    <div class="col-xs-2">
                            <p>￥45</p>
                        </div>
                </div>
                <div class="col-xs-12 yy" style="margin-top: -15px;">
                        <div class="col-xs-2">
                            <p style="width: 80px;">运费</p>
                        </div>
                        <div class="col-xs-8">
                                
                        </div>
                        <div class="col-xs-2">
                                <p style="width: 60px;">免运费</p>
                         </div>
                 </div>
        </div>
        <div class="shou">
            <div class="col-xs-12">
                <div class="col-xs-4">
                    <p class="zo">总计：</p>
                    <p class="qi">￥45</p>
                </div>
                <div class="col-xs-4">
                       
                </div>
                <div class="col-xs-4">
                    <p class="jie">结算</p>
                </div>
            </div>
        </div>
</body>
</html>